<template>
  <div class="maskCenter">
    <!-- style="height: 683px; width: 701px" -->
    <div id="box" :class="visible ? 'systemDialog' : 'systemDialog-hide'"
      :style="{ height: dialogHeight, width: dialogWidth }">
      <div class="dialog-header" v-movew>
        <span>{{ title }}</span>
        <el-tooltip class="item" effect="dark" content="关闭" placement="top-start">
          <span class="icon iconfont iconbiaoqianlan-guanbi close" @click="hide"></span>
        </el-tooltip>
      </div>
      <div class="dialog-body">
        <el-form ref="form" label-width="75px" :label-position="'left'" v-if="isNodeType == 'node'">
          <el-form-item label="名称:">
            <el-col :span="10">
              <el-input class="systemInput" v-model="nodeAttr.name"></el-input>
            </el-col>
            <el-col :span="4">
              <div>节点别名:</div>
            </el-col>
            <el-col :span="10">
              <el-input class="systemInput" v-model="nodeAttr.title"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="运行方式:">
            <el-col :span="10">
              <el-select class="systemInput" v-model="nodeAttr.runType" placeholder style="width: 246.66px">
                <el-option v-for="item in runTypes" :key="item.value" :label="item.label" :value="item.value"
                  style="width: 246.66px"></el-option>
              </el-select>
            </el-col>
            <el-col :span="4">
              <div>超时时限:</div>
            </el-col>
            <el-col class="divinput" :class="{ divinputactive: inputfocus }" :span="10">
              <el-input v-model="nodeAttr.limitHour" @focus="inputfocus = true" @blur="inputfocus = false">
                <div slot="append">
                  <span style="margin-right: 5px">|</span>小时
                </div>
              </el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="唯一标识:">
            <el-col :span="24">
              <el-input class="systemInput" v-model="nodeAttr.code" :readonly="true"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="通知文字:" v-show="false">
            <el-col :span="24">
              <el-input class="systemInput" v-model="nodeAttr.msg"></el-input>
            </el-col>
          </el-form-item>

          <el-form-item label="描述信息:">
            <el-col :span="24">
              <el-input class="systemInput" v-model="nodeAttr.note"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="关联表单:">
            <el-col :span="24">
              <el-input class="systemInput" v-model="nodeAttr.wpClassName" clearable readonly
                @dblclick.native="formDdclick"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="消息类型:">
            <el-col :span="5" style="text-align: left">
              <el-checkbox systemCheckbox v-model="nodeAttr.sms">手机短信</el-checkbox>
            </el-col>
            <el-col :span="7" style="text-align: left">
              <el-checkbox systemCheckbox v-model="nodeAttr.jpush">移动终端</el-checkbox>
            </el-col>
          </el-form-item>
          <el-form-item class="noLabel" :disabled="nodeAttr.runType === 3">
            <el-col :span="24">
              <el-tabs v-model="activeName">
                <el-tab-pane label="常规信息" name="first">
                  <div class="attributes-div">
                    <el-row>
                      <el-col :span="5">异步控制</el-col>
                      <el-col :span="19">其它控制</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="5">
                        <el-checkbox systemCheckbox v-model="nodeAttr.syncBegin"
                          :disabled="nodeAttr.runType === 3">启用并发</el-checkbox>
                      </el-col>
                      <el-col :span="19">
                        <el-checkbox systemCheckbox v-model="nodeAttr.mobileDevice"
                          :disabled="nodeAttr.runType === 3">移动终端</el-checkbox>
                      </el-col>
                    </el-row>
                    <!-- TODO 新增 -->
                    <el-row>
                      <el-col :span="24">路由通过率</el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">
                        <el-select ref="routPassRef" v-model="routPassTagInputValue" placeholder="请选择"
                          :allow-create="true" :filterable="true" @change="routPassChange">
                          <el-option v-for="item in routPassTags" :key="item.value" :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                        <div v-if="false">
                          <el-tag :key="tag" v-for="(tag, index) in routPassTags" :type="routPassColorArr[index]" closable
                            :disable-transitions="false" @close="routPassHandleClose(tag, index)"
                            @click="routPassHandleClick(tag, index)">
                            {{ tag }}
                          </el-tag>
                          <el-input class="input-new-tag" v-if="routPassTagInputVisible" v-model="routPassTagInputValue"
                            ref="routPassSaveTagInput" size="small" @keyup.enter.native="routPassHandleInputConfirm"
                            @blur="routPassHandleInputConfirm">
                          </el-input>
                          <el-button v-else class="button-new-tag" size="small" @click="routPassShowInput">+新增</el-button>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col :span="24">候选人员</el-col>
                    </el-row>
                    <el-row>
                      <!-- <el-col :span="5">
                        <el-checkbox
                          systemCheckbox
                          v-model="nodeAttr.userOneByOne"
                          :disabled="nodeAttr.runType === 3"
                          >逐一处理</el-checkbox
                        >
                      </el-col> -->
                      <el-col :span="5">
                        <el-checkbox systemCheckbox v-model="nodeAttr.userOneByOne"
                          :disabled="nodeAttr.runType === 3">人员通过率</el-checkbox>
                      </el-col>
                      <el-col :span="5">
                        <el-checkbox systemCheckbox v-model="nodeAttr.userMulti"
                          :disabled="nodeAttr.runType === 3">可以多选</el-checkbox>
                      </el-col>
                      <el-col :span="5">
                        <el-checkbox systemCheckbox v-model="nodeAttr.userSelect"
                          :disabled="nodeAttr.runType === 3">默认选择</el-checkbox>
                      </el-col>
                      <el-col :span="9">
                        <span :class="nodeAttr.runType === 3
                            ? 'systemButtonConfirm systemButtonDisabled'
                            : 'systemButtonConfirm'
                          " @click="showWinRole">备选角色</span>
                      </el-col>
                    </el-row>
                    <el-row v-show="nodeAttr.userOneByOne">
                      <el-col :span="24">
                        <el-select ref="personPassRef" v-model="personPassTagInputValue" placeholder="请选择"
                          :allow-create="true" :filterable="true" @change="personPassChange">
                          <el-option v-for="item in personPassTags" :key="item.value" :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                        <div v-if="false">
                          <el-tag :key="tag" v-for="(tag, index) in personPassTags" :type="personPassColorArr[index]"
                            closable :disable-transitions="false" @close="personPassHandleClose(tag, index)"
                            @click="personPassHandleClick(tag, index)">
                            {{ tag }}
                          </el-tag>
                          <el-input class="input-new-tag" v-if="personPassTagInputVisible"
                            v-model="personPassTagInputValue" ref="personPassSaveTagInput" size="small"
                            @keyup.enter.native="personPassHandleInputConfirm" @blur="personPassHandleInputConfirm">
                          </el-input>
                          <el-button v-else class="button-new-tag" size="small"
                            @click="personPassShowInput">+新增</el-button>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-tab-pane>
                <el-tab-pane class="scriptDiv" label="启动脚本" name="second">
                  <el-input class="systemInput" type="textarea" :autosize="{ minRows: 10, maxRows: 10 }"
                    v-model="nodeAttr.startScript" :resize="'none'"></el-input>
                </el-tab-pane>

                <el-tab-pane class="scriptDiv" label="结束脚本" name="fourth">
                  <el-input class="systemInput" type="textarea" :autosize="{ minRows: 10, maxRows: 10 }"
                    v-model="nodeAttr.endScript" :resize="'none'"></el-input>
                </el-tab-pane>
                <el-tab-pane class="scriptDiv" label="回退脚本" name="third">
                  <el-input class="systemInput" type="textarea" :autosize="{ minRows: 10, maxRows: 10 }"
                    v-model="nodeAttr.backScript" :resize="'none'"></el-input>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-form-item>
        </el-form>
        <el-form label-width="75px" :label-position="'left'" v-else-if="isNodeType == 'text'">
          <el-form-item label="文本内容:">
            <el-col :span="24">
              <el-input class="systemInput" v-model="nodeAttr.name"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="字体大小:">
            <el-col :span="24">
              <el-input class="systemInput:" v-model="nodeAttr.fontType" type="number"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="字体类型:" v-if="false">
            <el-col :span="24" style="text-align: left">
              <el-select v-model="value" placeholder="请选择">
                <el-option v-for="item in fontTypeArr" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="字号:" v-show="false">
            <el-col :span="24">
              <el-input class="systemInput" v-model="nodeAttr.fontSize"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="字体颜色:" style="text-align: left">
            <el-col :span="24">
              <el-color-picker class="myPicker" v-model="nodeAttr.fontColor" style="width: 250px"></el-color-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="背景色:" style="text-align: left">
            <el-col :span="24">
              <el-color-picker class="myPicker" v-model="nodeAttr.backGroundColor" style="width: 250px"></el-color-picker>
            </el-col>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer right">
        <span class="systemButtonConfirm" @click="okclick">确认</span>
        <span class="systemButtonConfirm" @click="hide">取消</span>
      </div>
      <winRoleSelect v-if="showRole" :activeRole="activeRole" @close="closeRole" @ok="setRole"></winRoleSelect>
    </div>
    <!-- 关联表单弹窗 -->
    <div class="maskCenter" v-if="relevantDialogVisible">
      <div class="systemDialog checkDialog" style="width: 665px; height: 546px">
        <div class="dialog-header" v-winmove>
          <span>关联表单</span>
        </div>
        <div class="dialog-body">
          <el-input placeholder="请输入表单名称" class="systemInput" v-model="searchName" @change="relevantDialogSearch">
            <el-button slot="append" icon="el-icon-search" @click="relevantDialogSearch"></el-button>
          </el-input>
          <el-checkbox-group v-model="checkedList" @change="bindCheckBox">
            <el-checkbox class="systemCheckbox" v-for="item in relevantDialogList" :label="item" :key="item.id">{{
              item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="dialog-footer right">
          <span class="systemButtonConfirm" @click="relevantDialogSave">确定</span>
          <span class="systemButtonCancel" @click="relevantDialogCancel">取消</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import {movew,winmove } from "@/directives/winmove";
import movew from "@/directives/winmove";
import winRoleSelect from "@/system/components/winRoleSelect.vue";
import { deepCopy } from "@/utils/public";
import { queryList } from "@/system/api/menuManage";
import { pageQuery } from "@/system/api/customPage";

export default {
  directives: {
    movew,
    // winmove,
  },
  name: "nodeAttribute",
  props: {
    activeNode: {
      default: null,
    },
    isNodeType: {
      type: String,
      default: "node", //node为节点，text为文本
    },
  },
  data() {
    return {
      visible: true,
      title: "节点属性",
      nodeAttr: {},
      runTypes: [
        { value: 0, label: "启动节点" },
        { value: 1, label: "结束节点" },
        { value: 2, label: "客户端运行" },
        { value: 3, label: "服务器运行" },
      ],
      units: [
        { id: 1, name: "小时" },
        { id: 2, name: "天" },
        { id: 3, name: "月" },
        { id: 4, name: "年" },
      ],
      importants: [
        { id: 1, name: "一般" },
        { id: 2, name: "重要" },
        { id: 3, name: "紧急" },
      ],
      activeName: "first",
      inputfocus: false,
      showRole: false,
      activeRole: null,
      relevantDialogVisible: false,
      searchName: "",
      checkedList: [],
      relevantWfList: [],
      windowList: [],
      relevantDialogList: [],
      menuForm: {},
      color1: "#409EFF",
      dialogHeight: "683px",
      dialogWidth: "701px",
      //新增路由通过率字段
      routPassTags: [
        {
          value: "1%",
          label: "1%",
        },
        {
          value: "100%",
          label: "100%",
        }
      ], //['100%'],
      routPassTagInputVisible: false,
      routPassTagInputValue: "",
      routPassColorArr: ["info"],
      //新增人员通过率字段
      personPassTags: [
        {
          value: "1%",
          label: "1%",
        },
        {
          value: "100%",
          label: "100%",
        }
      ],//["100%"],
      personPassTagInputVisible: false,
      personPassTagInputValue: "",
      personPassColorArr: ["info"],
      fontTypeArr: [
        {
          value: "选项1",
          label: "Helvetica Neue",
        },
        {
          value: "选项2",
          label: "Helvetica",
        },
        {
          value: "选项3",
          label: "PingFang SC",
        },
        {
          value: "选项4",
          label: "Hiragino Sans GB",
        },
        {
          value: "选项5",
          label: "Microsoft YaHei",
        },
        {
          value: "选项6",
          label: "微软雅黑",
        },
        {
          value: "选项7",
          label: "Arial",
        },
        {
          value: "选项8",
          label: "sans-serif",
        },
      ],
      value: "",
    };
  },
  components: {
    winRoleSelect,
  },
  async mounted() {
    if (this.activeNode) {
      this.nodeAttr = deepCopy(this.activeNode);
      if (this.nodeAttr.jpush == null) {
        this.$set(this.nodeAttr, "jpush", true);
      }
      if (this.nodeAttr.repId != null) {
        //根据repId查找关联表单元素
        this.relevantDialogList = await this.relevantQuery();
        let relevantDialog = this.relevantDialogList.filter((item) => {
          return item.id == this.nodeAttr.repId;
        });
        this.$set(this.nodeAttr, "wpClassName", relevantDialog[0].name);
        // this.checkedList.push(relevantDialog[0]);
      }
      if (this.nodeAttr.routePercent) {
        let routObj = {};
        routObj.label = this.nodeAttr.routePercent + "%";
        routObj.value = this.nodeAttr.routePercent + "%";
        this.routPassTags.push(routObj);
        // this.routPassColorArr.push("");
      }
      if (this.nodeAttr.userPercent) {
        let personObj = {};
        personObj.label = this.nodeAttr.userPercent + "%";
        personObj.value = this.nodeAttr.userPercent + "%";
        this.personPassTags.push(personObj);
        // this.personPassColorArr.push("");
      }
    }
    console.log("nodeAttr:" + JSON.stringify(this.nodeAttr));
    if (this.isNodeType == "text") {
      this.dialogHeight = "320px";
    }
  },
  methods: {
    routPassChange(e) {
      //路由通过率change事件
      let routFilter = this.routPassTags.filter(routTags => {
        return routTags.label == e
      });
      if (routFilter.length == 0) {
        let routObj = {};
        routObj.label = e;
        routObj.value = e;
        this.routPassTags.push(routObj)
      }
      if (e.indexOf("%") != -1) {
        this.$set(
          this.nodeAttr,
          "routePercent",
          Number(e.split("%")[0]).toFixed(2)
        );
      } else {
        this.$set(
          this.nodeAttr,
          "routePercent",
          Number(e).toFixed(2)
        );
      }
    },
    personPassChange(e) {
      //人员通过率下拉框change事件
      let personFilter = this.personPassTags.filter(personTags => {
        return personTags.label == e
      });
      if (personFilter.length == 0) {
        let personObj = {};
        personObj.label = e;
        personObj.value = e;
        this.personPassTags.push(personObj)
      }
      if (e.indexOf("%") != -1) {
        this.$set(
          this.nodeAttr,
          "userPercent",
          Number(e.split("%")[0]).toFixed(2)
        );
      } else {
        this.$set(
          this.nodeAttr,
          "userPercent",
          Number(e).toFixed(2)
        );
      }
    },
    routPassHandleClick(tag, index) {
      let len = this.routPassColorArr.length;
      this.routPassColorArr.splice(0);
      for (let i = 0; i < len; i++) {
        this.routPassColorArr.push("info");
      }
      this.routPassColorArr.splice(index, 1, "");
      this.$set(
        this.nodeAttr,
        "routePercent",
        Number(tag.split("%")[0]).toFixed(2)
      );
    },
    routPassHandleClose(tag, index) {
      this.routPassTags.splice(this.routPassTags.indexOf(tag), 1);
      this.routPassColorArr.splice(index, 1);
    },

    routPassShowInput() {
      this.routPassTagInputVisible = true;
      this.$nextTick((_) => {
        this.$refs.routPassSaveTagInput.$refs.input.focus();
      });
    },

    routPassHandleInputConfirm() {
      let routPassTagInputValue = this.routPassTagInputValue;
      if (routPassTagInputValue) {
        this.routPassTags.push(routPassTagInputValue);
        this.routPassColorArr.push("info");
      }
      this.routPassTagInputVisible = false;
      this.routPassTagInputValue = "";
    },
    //人员通过率函数
    personPassHandleClick(tag, index) {
      let len = this.personPassColorArr.length;
      this.personPassColorArr.splice(0);
      for (let i = 0; i < len; i++) {
        this.personPassColorArr.push("info");
      }
      this.personPassColorArr.splice(index, 1, "");
      this.$set(
        this.nodeAttr,
        "userPercent",
        Number(tag.split("%")[0]).toFixed(2)
      );
    },
    personPassHandleClose(tag, index) {
      this.personPassTags.splice(this.personPassTags.indexOf(tag), 1);
      this.personPassColorArr.splice(index, 1);
    },

    personPassShowInput() {
      this.personPassTagInputVisible = true;
      this.$nextTick((_) => {
        this.$refs.personPassSaveTagInput.$refs.input.focus();
      });
    },

    personPassHandleInputConfirm() {
      let personPassTagInputValue = this.personPassTagInputValue;
      if (personPassTagInputValue) {
        this.personPassTags.push(personPassTagInputValue);
        this.personPassColorArr.push("info");
      }
      this.personPassTagInputVisible = false;
      this.personPassTagInputValue = "";
    },
    bindCheckBox() {
      /*
       *@description:弹出表单复选框单选事件
       *@modifyContent:
       *@author: xuzhaoqian
       *@date: 2021-06-01 14:02:37
       */
      if (this.checkedList.length > 1) {
        this.checkedList.splice(0, 1);
      }
    },
    hide() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("close");
      }, 400);
    },
    okclick() {
      this.visible = false;
      setTimeout(() => {
        this.$emit("ok", this.nodeAttr);
      }, 400);
    },
    closeRole() {
      this.showRole = false;
    },
    setRole(e) {
      this.showRole = false;
      console.log(e);
      this.nodeAttr.role = e;
    },
    showWinRole() {
      if (this.nodeAttr.runType === 3) {
        return;
      }
      this.showRole = true;
      if (this.nodeAttr.role) {
        this.activeRole = this.nodeAttr.role;
      }
    },
    async formDdclick() {
      this.relevantDialogVisible = true;
      this.searchName = "";
      this.checkedList = [];
      this.relevantDialogList = await this.relevantQuery();
    },
    async relevantDialogSearch(type) {
      if (type === 1) {
        // 窗体
        const pageList = await pageQuery({
          customPage: { text: this.searchName },
          pageSize: 0,
          pageIndex: 0,
        });
        this.windowList = pageList.info;
      } else if (type === 2) {
        // 流程
        this.relevantWfList = await this.relevantWf(this.searchName);
      } else {
        // 表单
        this.relevantQuery(this.searchName).then((res) => {
          this.relevantDialogList = res;
        });
      }
    },
    // 窗体&流程勾选
    async handleWindowCheck(e, a) {
      if (e.length > 1) {
        // 单选
        e.splice(0, 1);
      }
      if (a === 2) {
        // 流程
        if (e[0]) {
          const detail = await workflowclassdetail({ id: e[0] });
          this.menuForm.wfClassName = detail.info.name;
          this.menuForm.wfClassId = detail.info.id;
        } else {
          this.menuForm.wfClassName = null;
          this.menuForm.wfClassId = null;
        }
      }
    },
    relevantQuery(name) {
      return queryList({ name: name }).then((res) => {
        if (res.success) {
          return res.info;
        } else this.message(res.msg, 3);
      });
    },
    relevantWfSave() {
      this.relevantWfVisible = false;
    },
    relevantDialogCancel() {
      this.relevantDialogVisible = false;
      this.relevantWfVisible = false;
      this.checkedList = [];
    },
    relevantDialogSave() {
      if (this.checkedList.length === 0) {
        this.message("请选择关联表单", 3);
        return;
      } else {
        let ids = this.checkedList[0].id;
        let names = this.checkedList[0].name;
        for (let i = 1; i < this.checkedList.length; i++) {
          ids = ids + "," + this.checkedList[i].id;
          names = names + "," + this.checkedList[i].name;
        }
        // this.menuForm.repClassId = ids
        // this.menuForm.wpClassName = names
        this.nodeAttr.repId = ids;
        this.nodeAttr.wpClassName = names;
        this.relevantDialogVisible = false;
      }
    },
  },
};
</script>

<style scoped>
.scriptDiv /deep/ .el-textarea__inner {
  white-space: nowrap;
}

.myPicker /deep/ .el-color-picker__trigger {
  border: none;
  width: 200px;
}

.myPicker /deep/ .el-color-picker__color {
  border: 0;
}

.mask {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  background: var(--win-head-back-color);
  margin: 4px;
  text-align: left;
}

.header .title {
  width: calc(100% - 25px);
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: var(--system-page-topbar-text-color);
  margin-left: 12px;
}

.header .close {
  font-size: 12px;
  width: 12px;
  height: 12px;
  margin-right: 9px;
}

.dialog-body {
  color: var(--page-lable-text-color);
}

/*表单背景宽高设置*/

.open-content {
  background: var(--win-page-back-color);
  box-shadow: 0px 10px 20px 0px var(--win-page-shadow-color),
    0px -10px 20px 0px var(--win-page-shadow-color);
  border-radius: 4px;
  overflow: hidden;
  animation: myscale 0.4s;
}

/*表单打开动画*/

@keyframes myscale {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*表单关闭样式及动画*/

.open-content-hide {
  background: var(--win-page-back-color);
  box-shadow: 0px 10px 20px 0px var(--win-page-shadow-color),
    0px -10px 20px 0px var(--win-page-shadow-color);
  border-radius: 4px;
  overflow: hidden;
  animation: myscalehide 0.4s;
  transform: scale(0.6);
  opacity: 0;
}

@keyframes myscalehide {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-120px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.btndiv {
  margin-left: 5px;
  line-height: 32px;
  width: 100px;
  text-align: center;
  height: 32px;
}

.btndiv:hover {
  background: var(--button-hover-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}

.btndiv:active {
  background: var(--button-active-back-color);
  color: var(--button-active-text-color);
  cursor: pointer;
}

/*每行的标签高度设为32px*/
>>>.el-form-item__label {
  line-height: 32px;
}

/*设置el-form-item的高度*/
>>>.el-form-item__content {
  height: 32px;
  line-height: 32px;
}

/*数字输入框的上箭头行高*/
>>>.el-input-number__increase,
>>>.el-input-number__decrease {
  line-height: 16px !important;
}

/*数字输入样式*/
>>>.el-input-number {
  line-height: 32px;
  width: 100%;
}

/*element 输入框样式*/
>>>.el-input__inner {
  line-height: 32px;
  height: 32px;
  width: 100%;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

/*element 下拉框*/

>>>.el-input__inner:focus {
  border: 1px solid var(--input-focus-border-color);
}

/*下拉框箭头*/

>>>.el-select__caret {
  line-height: 32px;
}

/*el-form-item 每行离底部多元*/
>>>.el-form-item {
  margin-bottom: 16px;
}

/*tabs 样式*/
>>>.el-tabs__header {
  margin: 0;
}

.el-tabs {
  height: 100%;
}

>>>.el-tabs__active-bar {
  width: 80px !important;
}

>>>.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 0px;
}

>>>.el-tabs__item {
  padding: 0 !important;
  font-weight: bold;
  letter-spacing: 2px;
  height: 26px;
  line-height: 26px;
  color: var(--disable-text-color);
  text-align: center;
  border: none;
  min-width: 80px;
}

/*活动颜色*/
>>>.el-tabs__item.is-active {
  color: var(--active-color);
}

/*tabs 分割线*/
>>>.el-tabs__nav-wrap::after {
  height: 0px;
  background-color: var(--page-back-color);
}

/*tabs 前面没有标签内容要显示,去除margin-left*/
.noLabel>>>.el-form-item__content {
  margin-left: 0 !important;
}

.attributes-div[data-v-33de13ab] {
  height: 230px;
}

.footer {
  padding-right: 20px;
  height: 60px;
  line-height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-bottom: 20px;
}

>>>.el-row {
  text-align: left;
}

/*常规信息div*/
.attributes-div {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 9px;
  width: 660px;
  height: 221px;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
}

/*element 输入框的 focus hover样式*/
>>>.el-input__inner:focus,
>>>.el-textarea__inner:focus {
  background: var(--input-focus-back-color);
  border: 1px solid var(--input-focus-border-color);
  border-radius: 4px;
}

>>>.el-input__inner:hover,
>>>.el-textarea__inner:hover {
  background: var(--input-hover-back-color);
  border: 1px solid var(--input-focus-border-color);
}

>>>.el-textarea__inner {
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

>>>.el-textarea__inner {
  color: var(--input-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

>>>.el-form-item__label,
>>>.el-checkbox__label {
  color: var(--page-lable-text-color);
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
}

.divinput>>>.el-input__inner {
  border: none;
  background-color: transparent !important;
}

.divinput>>>.el-input-group__append {
  padding: 0 10px;
  border: none !important;
  background-color: transparent !important;
  color: var(--system-form-text-color);
}

.divinput>>>.el-input-group {
  border: 1px solid var(--system-form-input-border-color);
  border-radius: 4px;
}

.divinput .el-input-group:hover>>>.el-input-group__append {
  background: var(--input-hover-back-color) !important;
}

.divinput>>>.el-input-group:hover {
  border: 1px solid var(--input-focus-border-color) !important;
  box-shadow: var(--input-shadow) !important;
  background: var(--input-hover-back-color) !important;
}

.divinputactive>>>.el-input-group {
  background: var(--input-focus-back-color) !important;
  border: 1px solid var(--input-focus-border-color) !important;
}

/* 增加节点属性中，关联表单弹窗的CSS样式 */
.systemPage-wrapper .el-checkbox-group .el-checkbox {
  margin-right: 20px;
  margin-bottom: 12px;
  text-align: left;
  width: 189px;
  height: 36px;
  line-height: 36px;
  background: var(--menuManage-checkbox-bgc);
  opacity: 0.9;
  border-radius: 6px;
  padding-left: 14px;
  float: left;
}

/deep/ .el-tag:hover {
  border-color: rgb(64, 158, 255);
  cursor: pointer;
}

.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.attributes-div {
  overflow-y: auto;
}
</style>